@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";

.sale-banner {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem 3rem 1rem 2rem;
	font-size: 1rem;
	color: var(--studio-black);
	background-color: var(--studio-jetpack-green-30);

	@media (min-width: 1101px) {
		padding: 1rem;
	}

	&__content {
		width: calc(100% - 4rem);
		max-width: 1200px;

		@media (min-width: 783px) {
			display: flex;
			width: 95vw;
		}

		@media (min-width: 1101px) {
			width: 90vw;
		}

		@media (min-width: 1301px) {
			width: 85vw;
		}
	}

	&__countdown-timer {
		margin-left: auto;
		white-space: nowrap;
		color: var(--studio-black);
	}

	&__close-button {
		position: absolute;
		right: 1rem;
		color: var(--studio-black);
		cursor: pointer;
	}
}
